<template>
  <div class="tag-cloud">
    <div class="tag-header">
      <h3 class="tag-title">
        <i class="iconfont icon-tags"></i> 热门标签
      </h3>
    </div>
    <div class="tag-container">
      <router-link 
        v-for="tag in tags" 
        :key="tag.tagId"
        :to="`/tag/${tag.tagId}`"
        class="tag-item"
        :style="getTagStyle(tag)"
      >
        {{ tag.name }} ({{ tag.count }})
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TagCloud',
  props: {
    tags: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getTagStyle(tag) {
      const colors = [
        '#409EFF', '#67C23A', '#E6A23C', 
        '#F56C6C', '#909399', '#B37FEB',
        '#FF85C0', '#5D7092', '#FF9A2E'
      ]
      const sizes = ['12px', '14px', '16px', '18px']
      const index = tag.tagId % colors.length
      const sizeIndex = tag.count % sizes.length
      
      return {
        color: colors[index],
        'font-size': sizes[sizeIndex],
        'border-color': colors[index]
      }
    }
  }
}
</script>

<style scoped>
.tag-cloud {
  background: #fff;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tag-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.tag-title {
  font-size: 16px;
  margin: 0;
  color: #333;
  display: flex;
  align-items: center;
}

.tag-title i {
  margin-right: 8px;
  color: #409EFF;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-item {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s;
  opacity: 0.8;
}

.tag-item:hover {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>